<template>
<div class="hometop">
	<div class="topfix" data-reactid='3'>
		<!--<h1 class="topfl" data-reactid='4'>
			
			<span class="topplh">网易云音乐</span>
			
		</h1>-->
		<div class="logofl fl">
			<logo class="logo"></logo>
		</div>
		<div class="topfr fr">
			<span class="topbtn">下载APP</span>
		</div>
		
		
		<div class="fixclear"></div>
	</div>
	
	<nav class="u-tab">
		
			<li class="tabtitle">
				<router-link to="/">
				<div class="tabtxt"><span :class="{tabactive:curIndex==0}">推荐音乐</span></div>
				</router-link>
			</li>
		
		
		
			<li class="tabtitle">
				<router-link to="/hotsong">
				<div class="tabtxt"><span :class="{tabactive:curIndex==1}">热歌榜</span></div>
				</router-link>
			</li>
		
		
		
			<li class="tabtitle">
				<router-link to="/search">
				<div class="tabtxt"><span :class="{tabactive:curIndex==2}">搜索</span></div>
				</router-link>
			</li>
		
		
	</nav>
	
</div>
	
	
</template>

<script>
	import logo from '@/svg/logo.svg'
	
	export default {
		name:'appTop',
		components:{
			logo
		},
		data(){
			return {
				curIndex:0
			}
		},
//		activated(){
//			
//		}
		watch:{
			$route(newValue){
				if(newValue.fullPath=='/'){
					this.curIndex=0;
				}else
				if(/hotsong/.test(newValue.fullPath)){
					this.curIndex=1;
				}else
				if(/search/.test(newValue.fullPath)){
					this.curIndex=2;
				}
			}
		},
		mounted(){
			watch:{
			
				if(this.$route.fullPath=='/'){
					this.curIndex=0;
				}else
				if(/hotsong/.test(this.$route.fullPath)){
					this.curIndex=1;
				}else
				if(/search/.test(this.$route.fullPath)){
					this.curIndex=2;
				}
			
		}
		}
		
	}
	
</script>

<style lang="scss" scoped="scoped">
@import '../scss/common';
@import '../scss/reset';


.topfix{
	position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 r(20px);
    width: 100%;
    height: r(128px);
    background-color: #d43c33;
    box-sizing: border-box;
}
.topfl{
	position: relative;
    width: r(142px);
    height: r(25px);
}
.topplh{
	opacity: 0;
    color: #d43c33;
}
.logo{
	width: r(274px);
	margin-top: r(18px);
}
.topfr{
	float: right;
	font-size: 0;
	margin-left: r(150px);
	.topbtn{
		position: relative;
	    display: inline-block;
	    height: r(60px);
	    line-height: r(60px);
	    padding: 0 r(20px);
	    color: #fff;
	    font-size: r(30px);
	    border-color: #fff;
    	border-radius: 37.5%/100%;
    	border: r(1px) solid #fff;
	    &::after{
	    	content: "";
	    	border-color: #fff;
    		border-radius: 37.5%/100%;
    	    width: 200%;
		    height: 200%;
		    -webkit-transform: scale(.5);
		    transform: scale(.5);
		    position: absolute;
		    z-index: 2;
		    
		    top: 0;
		    left: 0;
		    pointer-events: none;
		    box-sizing: border-box;
		    width: 100%;
		    height: 100%;
		    -webkit-transform-origin: top left;
		    transform-origin: top left;
		    border: 0 solid rgba(0,0,0,.1);
	    }
	}
}
.u-tab{
	background-color: white;
	z-index: 101;
	display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    height: 40px;
    background: white;
    position: fixed;
	top: r(128px);
	left: 0;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
.tabtitle{
	font-size: 0;
	-webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    width: 33.3%;
    height: 100%;
    text-align: center;
    cursor: pointer;
    list-style: none;
    .tabtxt{
    	
        position: relative;
	    display: inline-block;
	    height: 100%;
	    padding: 0 r(10px);
	    box-sizing: border-box;
	    color: #333;
	    font-size: r(30px);
	    line-height: r(80px);
	    
	    span{
	    	vertical-align: middle;
	    	
	    	
	    }
	    .tabactive{
	    	color: #d33a31;
		    	&::after{
		    	content: "";
			    position: absolute;
			    left: 0;
			    bottom: -1px;
			    z-index: 3;
			    width: 100%;
			    height: r(8px);
			    -webkit-transform: scaleY(.5);
			    transform: scaleY(.5);
			    background: #d33a31;
			    
		    }
	    }
    }
}



</style>